<template>
  <div>
    <div class="personalPage" v-if="userInfo">
      <img src="@/assets/phoneTop.jpg" alt class="phoneTop" />

      <topBars msg="个人中心" />

      <div class="userInfo" @click="$router.push('/edit')">
        <img v-if="!userInfo.head_img" src="@/assets/logo.png" alt class="img" />
        <img v-else :src="$axios.defaults.baseURL + userInfo.head_img" alt class="img" />

        <div class="userDetailInfo">
          <div class="nickname">
            <div class="iconfont iconxingbienan"></div>
            <div class="nicknameText">{{userInfo.nickname}}</div>
          </div>

          <div class="date">{{(userInfo.create_date).split('T')[0]}}</div>
        </div>

        <div class="userInfoMore">
          编辑资料
          <div class="iconfont iconarrow"></div>
        </div>
      </div>

      <navBars lebal="我的关注" detail="关注的人" @barsClick="handleBar('/follow')" />

      <navBars lebal="我的跟帖" detail="跟帖 / 回复" @barsClick="handleBar('/comment')" />

      <navBars lebal="我的收藏" detail="文章 / 视频" @barsClick="handleBar('/star')" />

      <navBars lebal="栏目管理" detail="进入管理" @barsClick="handleBar('/manageList')" />

      <navBars lebal="退出" detail="注销账号" @barsClick="logOut" />
    </div>
  </div>
</template>

<script>
import topBars from "@/components/TopBars";
import navBars from "@/components/NavBars";

export default {
  data() {
    return {
      userInfo: ""
    };
  },
  components: {
    topBars,
    navBars
  },
  mounted() {
    this.$axios({
      url: "/user/" + localStorage.getItem("userId"),
      headers: {
        Authorization: "Bearer " + localStorage.getItem("userToken")
      }
    }).then(res => {
      console.log(res);
      this.userInfo = res.data.data;
    });
  },
  methods: {
    handleBar(pagePath) {
      this.$router.push(pagePath);
    },
    logOut() {
      this.$dialog
        .confirm({
          title: "客官确定真的要退出吗？"
        })
        .then(() => {
          localStorage.removeItem("userToken");
          localStorage.removeItem("userId");
          this.$router.replace("/login");
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style lang="less" scoped>
.phoneTop {
  width: 100%;
}

.userInfo {
  display: flex;
  align-items: center;
  padding: 5.333vw 0  7.333vw 0;
  border-bottom: 3.333vw solid #f5f6f7;
  .img {
    width: 19.444vw;
    height: 19.444vw;
    object-fit: cover;
    border-radius: 50%;
    padding: 0 5.556vw;
  }

  .userDetailInfo {
    flex: 1;
    .nickname {
      display: flex;
      padding-bottom: 1.111vw;

      .iconxingbienan {
        color: #66b4ea;
        padding-top: 1.111vw;
        padding-right: 1.111vw;
        font-size: 5vw;
      }

      .nicknameText {
        font-weight: 700;
      }
    }

    .date {
      font-size: 3.333vw;
      width: 22.222vw;
      height: 5vw;
      background-color: #a0c6e8;
      border-radius: 2.778vw;
      text-align: center;
      line-height: 5vw;
    }
  }

  .userInfoMore {
    display: flex;
    font-size: 3.333vw;
    .iconarrow {
      margin-right: 4.444vw;
      font-size: 3.333vw;
      padding-top: 0.556vw;
    }
  }
}
</style>